<template>
	<view>
		<u-form labelAlign="center">
			<u-form-item label="用户名:" prop="email" borderBottom labelWidth="100px">
				<u--input v-model="dataForm.nickName" border="none" placeholder="请输入用户名"></u--input>
			</u-form-item>
			<u-form-item label="邮箱:" prop="email" borderBottom labelWidth="100px">
				<u--input v-model="dataForm.email" border="none" placeholder="请输入邮箱"></u--input>
			</u-form-item>
			<u-form-item label="邮箱验证码:" prop="emailCode" borderBottom labelWidth="100px">
				<u--input v-model="dataForm.emailCode" border="none" placeholder="邮箱验证码"></u--input>
			</u-form-item>
			<view style="display: flex;">
				<button class="getCodeBtn" @click="getCode()">{{sending ? '已发送' : '发送邮箱验证码'}}</button>
			</view>
		</u-form>
		<button class="saveBtn" @click="submit">保存</button>
	</view>
</template>

<script>
	import {isEmail} from '@/util/utils.js'
	export default {
		data() {
			return {
				dataForm: {
					email: '',
					emailCode: '',
					nickName:''
				}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息，用于回显
			async getUserInfo() {
				const res = await this.$myRequest({
					url: 'user/applet/getUserInfo',
				})
				if (res && res.code === 0) {
					this.dataForm.email = res.data.email
					this.dataForm.nickName = res.data.nickName
				} else {
					uni.showToast({
						title: res.msg
					})
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getCode() {
				if(this.dataForm.email && isEmail(this.dataForm.email)){
					this.sendEmailCode()
				}else{
					uni.$u.toast('请输入正确的邮箱')
				}
			},
			async updateUserInfo() {
				const res = await this.$myRequest({
					url: 'user/applet/updateInfo',
					method: "POST",
					data: this.dataForm
				})
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			},
			//将邮箱验证码发送给用户
			async sendEmailCode() {
				const res = await this.$myRequest({
					url: 'user/email/getCode/' + this.dataForm.email,
					method: 'post'
				})
			},
			submit() {
				if(!this.dataForm.nickName){
					uni.showToast({
						icon:'none',
						title:"用户名不能为空"
					})
				}
				if(!this.dataForm.email || !isEmail(this.dataForm.email)){
					uni.showToast({
						icon: 'none',
						title:'请输入正确的邮箱'
					})
				}else if(this.dataForm.emailCode.length != 4){
					uni.showToast({
						icon: 'none',
						title: '验证码有误'
					})
				}
			},
			async saveEmail() {
				const res = await this.$myRequest({
					url: 'user/user/saveEmail',
					method: 'put',
					data: this.dataForm
				})
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.saveBtn {
		color: white;
		width: 600rpx;
		margin: 0 75rpx 0 75rpx;
		position: fixed;
		bottom: 20rpx;
		background-color: #FFB300;
	}

	.codeInput {
		border: 1rpx #FFB300 solid;
		border-radius: 10px;
		height: 80rpx;
		margin: 20rpx 0 0 20rpx;
	}

	.getCodeBtn {
		margin: 20rpx 0 0 450rpx;
		width: 270rpx;
		height: 70rpx;
		font-size: 30rpx;
		line-height: 70rpx;
		background-color: #FFB300;
		color: white;
		border-radius: 10px;

	}
</style>
